﻿@page "/dialogs"

<h3>Dialog 对话框组件</h3>

<h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>

<Block Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" CodeFile="dialog.1.html">
    <Button @onclick="@OnClick">点击打开 Dialog</Button>
</Block>

<Block Title="弹出复杂组件" Introduction="通过调用 <code>Show&lt;Counter&gt;()</code> 来弹出一个自定义组件" CodeFile="dialog.2.html">
    <p>
        本例中弹出对话框中包含一个示例网站的自带 <code>Counter</code> 组件，通过设置 <code>KeepChildrenState</code> 属性来控制弹窗内组件是否保持状态
        <ul>
            <li>选择 <b>不保持状态</b> 时，弹窗内的计数器数据关闭弹窗后清零</li>
            <li>选择 <b>保持状态</b> 时，弹窗内的计数器数据关闭弹窗后保持</li>
        </ul>
    </p>

    <p>
        <Radio Items="@RadioItems" OnStateChanged="@OnStateChanged" />
    </p>

    <Button @onclick="@OnClickCounter">点击打开 Dialog</Button>
</Block>

<Block Title="弹窗传参" Introduction="通过设置 <code>BodyContext</code> 属性值，可以把参数传递给弹窗中的组件内" CodeFile="dialog.3.html">
    <p>
        本例中点击按钮时设置 <code>BodyContext</code> 值为 <code>我是传参</code>，弹窗内容为自定义组件 <code>DemoComponent</code>，组件内通过级联参数获取到其值
    </p>
    <Button @onclick="@OnClickParameter">Dialog 传参示例</Button>
</Block>

<h4>特别注意</h4>

<p>本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用</p>

<p>
    需要在使用本组件的页面中内置 <code>Dialog</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下
</p>

<Pre>&lt;Dialog /&gt;</Pre>

<AttributeTable Items="@GetAttributes()" Title="DialogOption 属性" />

<Dialog></Dialog>